<template>
    <div class="table">
        <div class="header">
            <span>函数名</span>
            <span>函数描述</span>
            <span>参数</span>
            <span>返回</span>
            <span>备注</span>
        </div>
        <div class="body">
            <div class="row" v-for="(item, index) in $props.list" :key="index">
                <span>{{item.name}}</span>
                <span>{{item.decs}}</span>
                <span>{{item.params}}</span>
                <span>{{item.return}}</span>
                <span>{{item.remark}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['list']
}
</script>

<style lang="less" scoped>
.table{
    display: table;
    width: 100%;
    text-align: center;
    .header{
        display: table-row;
        background: rgb(255, 237, 200);
        span{
            display: table-cell;
            padding: 6px 0;
            border-bottom: 1px solid rgb(255, 187, 0);
            border-top: 1px solid rgb(255, 187, 0);
            font-weight: bold;
            &:nth-child(1){
                width: 16%;
            }
            &:nth-child(2){
                width: 22%;
            }
            &:nth-child(3){
                width: 20%;
            }
            &:nth-child(4){
                width: 20%;
            }
            &:nth-child(5){
                width: 22%;
            }
        }
    }
    .body{
        display: table-row-group;
        .row{
            display: table-row;
            span{
                display: table-cell;
                padding: 6px 2px;
                word-break: break-all ;
                word-wrap: break-word ;
            }
            &:nth-child(even){
                background: #eee;
            }
            &:last-child{
                span{
                    border-bottom: 1px solid rgb(255, 187, 0);
                }
            }
            &:hover{
                background: rgb(255, 225, 143);
            }
        }
    }
}
</style>